<template>
  <div id="app">
    <a-layout>
      <a-layout-header>自定义按钮封装</a-layout-header>
      <a-layout-content>
        <a-row>
          <h2>原生类型</h2>
          <MyBtn type="danger">Danger</MyBtn>
          <MyBtn type="primary">Primary</MyBtn>
          <MyBtn type="default">Default</MyBtn>
        </a-row>
        <a-row>
          <h2>自定义类型</h2>
          <MyBtn type="warning">Warning</MyBtn>
          <MyBtn type="success">Success</MyBtn>
          <MyBtn type="info">Info</MyBtn>
        </a-row>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
import MyBtn from '@/components/MyBtn'
export default {
  name: 'app',
  components: { MyBtn },
}
</script>

<style lang="less"  scope >
#app {
  color: white;
}
.ant-layout-content {
  padding: 15px;
  min-height: 180px !important;
}
</style>
